<template>
  <div>
    <TaskSampleList
      ref="tasks"
      @setSampleList="setSampleList"
      @setTaskDetail="setTaskDetail"
      @clearSample="clearSample"
      :title="'任务列表'"
    ></TaskSampleList>
    <TaskSampleList
      ref="samples"
      @setSampleTable="setSampleTable"
      @setSampleDetail="setSampleDetail"
      @clearAnalyze="clearAnalyze"
      :title="'采样列表'"
    ></TaskSampleList>
    <TaskDetail ref="taskDetail"></TaskDetail>
    <SampleDetail ref="sampleDetail"></SampleDetail>
  </div>
</template>
<script lang="ts" setup>
import TaskSampleList from './traceList/TaskSampleList.vue';
import TaskDetail from './traceList/TaskDetail.vue';
import SampleDetail from './traceList/SampleDetail.vue';
import { ref } from 'vue';
const tasks = ref();
const setTaskList = (searchFormParams) => {
  if (searchFormParams.endpointName == undefined && searchFormParams.serviceId == undefined) {
    searchFormParams.endpointName = '';
    searchFormParams.serviceId = '';
  }
  tasks.value.setList(searchFormParams);
};
const samples = ref();
const setSampleList = (taskItem) => {
  samples.value.setList(taskItem);
};
const emit = defineEmits(['setSampleTable', 'clearSampleTable', 'clearAnalyze']);
const setSampleTable = (sampleItem) => {
  emit('setSampleTable', sampleItem);
};
const taskDetail = ref();
const setTaskDetail = (taskItem) => {
  taskDetail.value.openDetail(taskItem);
};
const sampleDetail = ref();
const setSampleDetail = (sampleItem) => {
  sampleDetail.value.openDetail(sampleItem);
};
const clearAnalyze = () => {
  emit('clearAnalyze');
};
const clearSample = () => {
  emit('clearSampleTable');
};
const clear = () => {
  if (tasks.value) {
    tasks.value.clearList();
  }
  if (samples.value) {
    samples.value.clearList();
  }
};
defineExpose({ setTaskList, clear });
</script>
